<template>
  <div class="super-admin-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <h2>超级管理员系统</h2>
      </div>
      <div class="header-right">
        <span class="welcome">欢迎，{{ adminInfo.realName }}</span>
        <el-button type="danger" @click="handleLogout">退出登录</el-button>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="main-content">
      <!-- 标签页切换 -->
      <el-tabs v-model="activeTab" class="admin-tabs">
        <el-tab-pane label="管理员管理" name="admins">
          <!-- 管理员管理内容 -->
          <div class="tab-content">
            <!-- 搜索和操作区域 -->
            <div class="toolbar">
              <div class="search-area">
                <el-input
                  v-model="searchForm.username"
                  placeholder="用户名"
                  style="width: 200px; margin-right: 10px"
                  clearable
                />
                <el-input
                  v-model="searchForm.realName"
                  placeholder="真实姓名"
                  style="width: 200px; margin-right: 10px"
                  clearable
                />
                <el-input
                  v-model="searchForm.phone"
                  placeholder="联系电话"
                  style="width: 200px; margin-right: 10px"
                  clearable
                />
                <el-select
                  v-model="searchForm.level"
                  placeholder="管理员级别"
                  style="width: 150px; margin-right: 10px"
                  clearable
                >
                  <el-option label="普通管理员" :value="1" />
                  <el-option label="超级管理员" :value="2" />
                </el-select>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="resetSearch">重置</el-button>
              </div>
              
              <div class="action-area">
                <el-button type="success" @click="showCreateDialog">新增管理员</el-button>
                <el-button type="danger" @click="handleBatchDelete" :disabled="!selectedAdmins.length">
                  批量删除
                </el-button>
              </div>
            </div>

            <!-- 数据表格 -->
            <el-table
              :data="adminList"
              @selection-change="handleSelectionChange"
              v-loading="loading"
              border
              style="width: 100%"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="username" label="用户名" width="120" />
              <el-table-column prop="realName" label="真实姓名" width="120" />
              <el-table-column prop="phone" label="联系电话" width="130" />
              <el-table-column prop="email" label="邮箱" width="180" />
              <el-table-column prop="level" label="级别" width="100">
                <template #default="{ row }">
                  <el-tag :type="row.level === 0 ? 'danger' : 'success'">
                    {{ row.level === 0 ? '超级管理员' : '普通管理员' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="lastLoginTime" label="最后登录时间" width="160">
                <template #default="{ row }">
                  {{ row.lastLoginTime ? formatDateTime(row.lastLoginTime) : '未登录' }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="160">
                <template #default="{ row }">
                  {{ formatDateTime(row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                  <el-button type="primary" size="small" @click="showEditDialog(row)">
                    编辑
                  </el-button>
                  <el-button type="danger" size="small" @click="handleDelete(row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                v-model:current-page="pagination.current"
                v-model:page-size="pagination.size"
                :page-sizes="[10, 20, 50, 100]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
                    </div>
        </el-tab-pane>

        <el-tab-pane label="医生管理" name="doctors">
          <!-- 医生管理内容 -->
          <div class="tab-content">
            <!-- 搜索和操作区域 -->
            <div class="toolbar">
              <div class="search-area">
                <el-input
                  v-model="doctorSearchForm.realName"
                  placeholder="医生姓名"
                  style="width: 150px; margin-right: 10px"
                  clearable
                />
                <el-input
                  v-model="doctorSearchForm.practiceScope"
                  placeholder="执业范围"
                  style="width: 150px; margin-right: 10px"
                  clearable
                />
                <el-select
                  v-model="doctorSearchForm.hospitalName"
                  placeholder="医院名称"
                  style="width: 200px; margin-right: 10px"
                  clearable
                  v-if="adminInfo.level === 0"
                >
                  <el-option 
                    v-for="hospital in hospitalList" 
                    :key="hospital" 
                    :label="hospital" 
                    :value="hospital" 
                  />
                </el-select>
                <el-button type="primary" @click="handleDoctorSearch">搜索</el-button>
                <el-button @click="resetDoctorSearch">重置</el-button>
              </div>
              
              <div class="action-area">
                <el-button type="success" @click="showCreateDoctorDialog">新增医生</el-button>
                <el-button type="danger" @click="handleBatchDeleteDoctor" :disabled="!selectedDoctors.length">
                  批量删除
                </el-button>
              </div>
            </div>

            <!-- 医生数据表格 -->
            <el-table
              :data="doctorList"
              @selection-change="handleDoctorSelectionChange"
              v-loading="doctorLoading"
              border
              style="width: 100%"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="username" label="用户名" width="120" />
              <el-table-column prop="realName" label="医生姓名" width="120" />
              <el-table-column prop="phone" label="手机号" width="130" />
              <el-table-column prop="email" label="邮箱" width="180" />
              <el-table-column prop="gender" label="性别" width="80">
                <template #default="{ row }">
                  <el-tag :type="row.gender === 1 ? 'primary' : row.gender === 2 ? 'success' : 'info'">
                    {{ row.gender === 1 ? '男' : row.gender === 2 ? '女' : '未知' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="practiceScope" label="执业范围" width="120" />
              <el-table-column prop="hospitalName" label="所属医院" width="180" />
              <el-table-column prop="address" label="地址" width="200" />
              <el-table-column prop="createTime" label="创建时间" width="160">
                <template #default="{ row }">
                  {{ formatDateTime(row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                  <el-button type="primary" size="small" @click="showEditDoctorDialog(row)">
                    编辑
                  </el-button>
                  <el-button type="danger" size="small" @click="handleDeleteDoctor(row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 医生分页 -->
            <div class="pagination">
              <el-pagination
                v-model:current-page="doctorPagination.current"
                v-model:page-size="doctorPagination.size"
                :page-sizes="[10, 20, 50, 100]"
                :total="doctorPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleDoctorSizeChange"
                @current-change="handleDoctorCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="反馈处理" name="feedback">
          <!-- 反馈处理内容 -->
          <div class="tab-content">
            <div class="feedback-management-content">
              <div class="feedback-header">
                <h3>反馈处理管理</h3>
                <p>管理医生提交的反馈信息，进行审核和回复</p>
              </div>
              
              <div class="feedback-actions">
                <el-button type="primary" @click="goToFeedbackManagement">
                  <el-icon><ChatDotRound /></el-icon>
                  进入反馈处理
                </el-button>
                <el-button @click="refreshFeedbackData">
                  <el-icon><Refresh /></el-icon>
                  刷新数据
                </el-button>
              </div>
              
              <!-- 反馈统计卡片 -->
              <el-row :gutter="20" class="feedback-stats">
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-content">
                      <div class="stat-number">{{ feedbackStats.total || 0 }}</div>
                      <div class="stat-label">总反馈数</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-content">
                      <div class="stat-number pending">{{ feedbackStats.pending || 0 }}</div>
                      <div class="stat-label">待处理</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-content">
                      <div class="stat-number processing">{{ feedbackStats.processing || 0 }}</div>
                      <div class="stat-label">处理中</div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="stat-card">
                    <div class="stat-content">
                      <div class="stat-number resolved">{{ feedbackStats.resolved || 0 }}</div>
                      <div class="stat-label">已解决</div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="活动审核" name="activities">
          <!-- 活动审核内容 -->
          <div class="tab-content">
            <!-- 搜索和操作区域 -->
            <div class="toolbar">
              <div class="search-area">
                <el-input
                  v-model="activitySearchForm.name"
                  placeholder="活动名称"
                  style="width: 200px; margin-right: 10px"
                  clearable
                />
                <el-input
                  v-model="activitySearchForm.location"
                  placeholder="活动地点"
                  style="width: 200px; margin-right: 10px"
                  clearable
                />
                <el-select
                  v-model="activitySearchForm.status"
                  placeholder="审核状态"
                  style="width: 150px; margin-right: 10px"
                  clearable
                >
                  <el-option label="待审核" value="PENDING_AUDIT" />
                  <el-option label="已通过" value="APPROVED" />
                  <el-option label="已拒绝" value="REJECTED" />
                </el-select>
                <el-button type="primary" @click="handleActivitySearch">搜索</el-button>
                <el-button @click="resetActivitySearch">重置</el-button>
              </div>
              
              <div class="action-area">
                <el-button type="success" @click="refreshActivityList">刷新</el-button>
              </div>
            </div>

            <!-- 活动数据表格 -->
            <el-table
              :data="activityList"
              @selection-change="handleActivitySelectionChange"
              v-loading="activityLoading"
              border
              style="width: 100%"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="name" label="活动名称" width="200" />
              <el-table-column prop="location" label="活动地点" width="150" />
              <el-table-column prop="adminName" label="发布管理员" width="120" />
              <el-table-column prop="status" label="审核状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="getActivityStatusType(row.status)">
                    {{ getActivityStatusText(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间" width="160">
                <template #default="{ row }">
                  {{ formatDateTime(row.startTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间" width="160">
                <template #default="{ row }">
                  {{ formatDateTime(row.endTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="createdAt" label="创建时间" width="160">
                <template #default="{ row }">
                  {{ formatDateTime(row.createdAt) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                  <el-button 
                    v-if="row.status === 'PENDING_AUDIT'"
                    type="success" 
                    size="small" 
                    @click="showAuditDialog(row)"
                  >
                    审核
                  </el-button>
                  <el-button type="info" size="small" @click="viewActivityDetail(row)">
                    查看详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 活动分页 -->
            <div class="pagination">
              <el-pagination
                v-model:current-page="activityPagination.current"
                v-model:page-size="activityPagination.size"
                :page-sizes="[10, 20, 50, 100]"
                :total="activityPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleActivitySizeChange"
                @current-change="handleActivityCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="用户管理" name="users">
          <!-- 用户管理内容 -->
          <div class="tab-content">
            <!-- 搜索和操作区域 -->
            <div class="toolbar">
              <div class="search-area">
                <el-input
                  v-model="userSearchForm.username"
                  placeholder="用户名"
                  style="width: 150px; margin-right: 10px"
                  clearable
                />
                <el-input
                  v-model="userSearchForm.nickname"
                  placeholder="昵称"
                  style="width: 150px; margin-right: 10px"
                  clearable
                />
                <el-input
                  v-model="userSearchForm.phone"
                  placeholder="手机号"
                  style="width: 150px; margin-right: 10px"
                  clearable
                />
                <el-input
                  v-model="userSearchForm.email"
                  placeholder="邮箱"
                  style="width: 180px; margin-right: 10px"
                  clearable
                />
                <el-select
                  v-model="userSearchForm.status"
                  placeholder="状态"
                  style="width: 120px; margin-right: 10px"
                  clearable
                >
                  <el-option label="正常" :value="1" />
                  <el-option label="禁用" :value="0" />
                </el-select>
                <el-button type="primary" @click="handleUserSearch">搜索</el-button>
                <el-button @click="resetUserSearch">重置</el-button>
              </div>
              
              <div class="action-area">
                <el-button type="warning" @click="showDeletedUsers">查看已删除用户</el-button>
                <el-button type="danger" @click="handleBatchDeleteUser" :disabled="!selectedUsers.length">
                  批量删除
                </el-button>
              </div>
            </div>

            <!-- 用户数据表格 -->
            <el-table
              :data="userList"
              @selection-change="handleUserSelectionChange"
              v-loading="userLoading"
              border
              style="width: 100%"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="username" label="用户名" width="120" />
              <el-table-column prop="nickname" label="昵称" width="120" />
              <el-table-column prop="phone" label="手机号" width="130" />
              <el-table-column prop="email" label="邮箱" width="180" />
              <el-table-column prop="gender" label="性别" width="80">
                <template #default="{ row }">
                  <el-tag :type="row.gender === 1 ? 'primary' : row.gender === 2 ? 'success' : 'info'">
                    {{ row.gender === 1 ? '男' : row.gender === 2 ? '女' : '未知' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="80">
                <template #default="{ row }">
                  <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                    {{ row.status === 1 ? '正常' : '禁用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="lastLoginTime" label="最后登录" width="160">
                <template #default="{ row }">
                  {{ row.lastLoginTime ? formatDateTime(row.lastLoginTime) : '未登录' }}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="160">
                <template #default="{ row }">
                  {{ formatDateTime(row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="{ row }">
                  <el-button 
                    :type="row.status === 1 ? 'warning' : 'success'" 
                    size="small" 
                    @click="handleToggleUserStatus(row)"
                  >
                    {{ row.status === 1 ? '禁用' : '启用' }}
                  </el-button>
                  <el-button type="danger" size="small" @click="handleDeleteUser(row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 用户分页 -->
            <div class="pagination">
              <el-pagination
                v-model:current-page="userPagination.current"
                v-model:page-size="userPagination.size"
                :page-sizes="[10, 20, 50, 100]"
                :total="userPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleUserSizeChange"
                @current-change="handleUserCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="resetForm"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!isEdit">
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="form.realName" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="管理员级别" prop="level">
          <el-select v-model="form.level" style="width: 100%">
            <el-option label="普通管理员" :value="1" />
            <el-option label="超级管理员" :value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑医生对话框 -->
    <el-dialog
      v-model="doctorDialogVisible"
      :title="doctorDialogTitle"
      width="700px"
      @close="resetDoctorForm"
    >
      <el-form
        ref="doctorFormRef"
        :model="doctorForm"
        :rules="doctorFormRules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="doctorForm.username" :disabled="isEditDoctor" />
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!isEditDoctor">
          <el-input v-model="doctorForm.password" type="password" show-password />
        </el-form-item>
        <el-form-item label="医生姓名" prop="realName">
          <el-input v-model="doctorForm.realName" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="doctorForm.gender" style="width: 100%">
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="doctorForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="doctorForm.email" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="doctorForm.address" />
        </el-form-item>
        <el-form-item label="执业范围" prop="practiceScope">
          <el-input v-model="doctorForm.practiceScope" />
        </el-form-item>
        <el-form-item label="所属医院" prop="hospitalName">
          <el-select v-model="doctorForm.hospitalName" style="width: 100%">
            <el-option 
              v-for="hospital in hospitalList" 
              :key="hospital" 
              :label="hospital" 
              :value="hospital" 
            />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="doctorDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDoctorSubmit" :loading="doctorSubmitLoading">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 已删除用户对话框 -->
    <el-dialog
      v-model="deletedUsersDialogVisible"
      title="已删除用户管理"
      width="1200px"
      @close="() => { deletedUsersDialogVisible = false; deletedUsersPagination.current = 1; selectedDeletedUsers = [] }"
    >
      <div class="deleted-users-content">
        <!-- 批量操作区域 -->
        <div class="batch-actions" style="margin-bottom: 15px;">
          <el-button 
            type="success" 
            @click="handleBatchRestoreUsers" 
            :disabled="!selectedDeletedUsers.length"
          >
            批量恢复 ({{ selectedDeletedUsers.length }})
          </el-button>
        </div>
        
        <!-- 已删除用户表格 -->
        <el-table
          :data="deletedUsersList"
          v-loading="deletedUsersLoading"
          @selection-change="handleDeletedUsersSelectionChange"
          border
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="username" label="用户名" width="120" />
          <el-table-column prop="nickname" label="昵称" width="120" />
          <el-table-column prop="phone" label="手机号" width="130" />
          <el-table-column prop="email" label="邮箱" width="180" />
          <el-table-column prop="gender" label="性别" width="80">
            <template #default="{ row }">
              <el-tag :type="row.gender === 1 ? 'primary' : row.gender === 2 ? 'success' : 'info'">
                {{ row.gender === 1 ? '男' : row.gender === 2 ? '女' : '未知' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="birthDate" label="出生日期" width="120">
            <template #default="{ row }">
              {{ row.birthDate || '未设置' }}
            </template>
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号" width="180" />
          <el-table-column prop="address" label="地址" width="200" />
          <el-table-column prop="createTime" label="创建时间" width="160">
            <template #default="{ row }">
              {{ formatDateTime(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="deleteTime" label="删除时间" width="160">
            <template #default="{ row }">
              {{ formatDateTime(row.deleteTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button type="success" size="small" @click="handleRestoreUser(row.id)">
                恢复
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 已删除用户分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="deletedUsersPagination.current"
            v-model:page-size="deletedUsersPagination.size"
            :page-sizes="[10, 20, 50, 100]"
            :total="deletedUsersPagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleDeletedUsersSizeChange"
            @current-change="handleDeletedUsersCurrentChange"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 活动审核对话框 -->
    <el-dialog
      v-model="activityAuditDialogVisible"
      title="活动审核"
      width="600px"
      :close-on-click-modal="false"
    >
      <div v-if="selectedAuditActivity" class="audit-dialog-content">
        <div class="activity-info">
          <h4>活动信息</h4>
          <p><strong>活动名称：</strong>{{ selectedAuditActivity.name }}</p>
          <p><strong>活动地点：</strong>{{ selectedAuditActivity.location }}</p>
          <p><strong>活动描述：</strong>{{ selectedAuditActivity.description }}</p>
          <p><strong>开始时间：</strong>{{ formatDateTime(selectedAuditActivity.startTime) }}</p>
          <p><strong>结束时间：</strong>{{ formatDateTime(selectedAuditActivity.endTime) }}</p>
          <p><strong>发布管理员：</strong>{{ selectedAuditActivity.adminName }}</p>
        </div>
        
        <el-divider />
        
        <el-form :model="auditForm" label-width="100px">
          <el-form-item label="审核结果">
            <el-radio-group v-model="auditForm.approved">
              <el-radio :label="true">通过</el-radio>
              <el-radio :label="false">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="审核意见">
            <el-input
              v-model="auditForm.comment"
              type="textarea"
              :rows="4"
              placeholder="请输入审核意见（可选）"
            />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="activityAuditDialogVisible = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="confirmAudit"
            :loading="auditSubmitLoading"
          >
            确认审核
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ChatDotRound, Refresh } from '@element-plus/icons-vue'
import {
  getAdminPage,
  createAdmin,
  updateAdmin,
  deleteAdmin,
  batchDeleteAdmin,
  getHospitalList
} from '../api/admin'
import { 
  getUserPage, 
  deleteUser, 
  batchDeleteUser,
  getDeletedUsersPage,
  restoreUser,
  batchRestoreUsers
} from '../api/user'
import {
  getDoctorsByAdmin,
  deleteDoctorByAdmin,
  createDoctor,
  updateDoctor,
  deleteDoctor,
  batchDeleteDoctor
} from '../api/doctor'
import {
  getAdminNames,
  getProcessedFeedbacksByAdmin,
  getPendingFeedbacksByAdmin
} from '../api/feedback'

const router = useRouter()

// 响应式数据
const activeTab = ref('admins')
const loading = ref(false)
const submitLoading = ref(false)
const dialogVisible = ref(false)
const isEdit = ref(false)
const selectedAdmins = ref([])
const adminList = ref([])

// 用户管理相关
const userLoading = ref(false)
const userList = ref([])
const selectedUsers = ref([])
const deletedUsersDialogVisible = ref(false)
const deletedUsersLoading = ref(false)
const deletedUsersList = ref([])
const selectedDeletedUsers = ref([])

// 医生管理相关
const doctorLoading = ref(false)
const doctorList = ref([])
const selectedDoctors = ref([])
const doctorDialogVisible = ref(false)
const doctorSubmitLoading = ref(false)
const isEditDoctor = ref(false)
const hospitalList = ref([])

// 反馈管理相关
const feedbackStats = ref({
  total: 0,
  pending: 0,
  processing: 0,
  resolved: 0
})

// 分页信息
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 用户分页信息
const userPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 已删除用户分页信息
const deletedUsersPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 医生分页信息
const doctorPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 搜索表单
const searchForm = reactive({
  username: '',
  realName: '',
  phone: '',
  level: ''
})

// 用户搜索表单
const userSearchForm = reactive({
  username: '',
  nickname: '',
  phone: '',
  email: '',
  status: ''
})

// 医生搜索表单
const doctorSearchForm = reactive({
  realName: '',
  practiceScope: '',
  hospitalName: ''
})

// 活动审核相关
const activityLoading = ref(false)
const activityList = ref([])
const selectedActivities = ref([])
const activityAuditDialogVisible = ref(false)
const auditSubmitLoading = ref(false)
const selectedAuditActivity = ref(null)

// 活动分页信息
const activityPagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 活动搜索表单
const activitySearchForm = reactive({
  name: '',
  location: '',
  status: ''
})

// 审核表单数据
const auditForm = reactive({
  approved: true,
  comment: ''
})

// 表单数据
const form = reactive({
  id: null,
  username: '',
  password: '',
  realName: '',
  phone: '',
  email: '',
  level: 1
})

// 医生表单数据
const doctorForm = reactive({
  id: null,
  username: '',
  password: '',
  realName: '',
  gender: 1,
  phone: '',
  email: '',
  address: '',
  practiceScope: '',
  hospitalName: ''
})

// 表单验证规则
const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  level: [
    { required: true, message: '请选择管理员级别', trigger: 'change' }
  ]
}

const formRef = ref()

// 医生表单验证规则
const doctorFormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入医生姓名', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  practiceScope: [
    { required: true, message: '请输入执业范围', trigger: 'blur' }
  ],
  hospitalName: [
    { required: true, message: '请选择所属医院', trigger: 'change' }
  ]
}

const doctorFormRef = ref()

// 计算属性
const dialogTitle = computed(() => isEdit.value ? '编辑管理员' : '新增管理员')
const doctorDialogTitle = computed(() => isEditDoctor.value ? '编辑医生' : '新增医生')
const adminInfo = computed(() => {
  const info = localStorage.getItem('adminInfo')
  return info ? JSON.parse(info) : {}
})

// 方法
const loadData = async () => {
  loading.value = true
  try {
    const response = await getAdminPage(searchForm, pagination.current, pagination.size)
    if (response.code === 200) {
      adminList.value = response.data.records
      pagination.total = response.data.total
    }
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

// 获取用户列表
const fetchUserList = async () => {
  try {
    userLoading.value = true
    const queryDTO = { ...userSearchForm }
    const pageDTO = { current: userPagination.current, size: userPagination.size }
    
    const response = await getUserPage(queryDTO, pageDTO)
    
    if (response.code === 200) {
      userList.value = response.data.records
      userPagination.total = response.data.total
    } else {
      ElMessage.error(response.message || '获取用户列表失败')
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    ElMessage.error('获取用户列表失败，请检查网络连接')
  } finally {
    userLoading.value = false
  }
}

const handleSearch = () => {
  pagination.current = 1
  loadData()
}

const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  pagination.current = 1
  loadData()
}

// 用户搜索
const handleUserSearch = () => {
  userPagination.current = 1
  fetchUserList()
}

// 重置用户搜索
const resetUserSearch = () => {
  Object.assign(userSearchForm, {
    username: '',
    nickname: '',
    phone: '',
    email: '',
    status: ''
  })
  userPagination.current = 1
  fetchUserList()
}

const handleSizeChange = (size) => {
  pagination.size = size
  pagination.current = 1
  loadData()
}

const handleCurrentChange = (current) => {
  pagination.current = current
  loadData()
}

const handleSelectionChange = (selection) => {
  selectedAdmins.value = selection
}

// 用户选择变化
const handleUserSelectionChange = (selection) => {
  selectedUsers.value = selection
}

const showCreateDialog = () => {
  isEdit.value = false
  dialogVisible.value = true
}

const showEditDialog = (row) => {
  isEdit.value = true
  Object.assign(form, row)
  dialogVisible.value = true
}

const resetForm = () => {
  Object.keys(form).forEach(key => {
    form[key] = key === 'level' ? 1 : ''
  })
  form.id = null
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    if (isEdit.value) {
      await updateAdmin(form)
      ElMessage.success('更新成功')
    } else {
      await createAdmin(form)
      ElMessage.success('创建成功')
    }
    
    dialogVisible.value = false
    loadData()
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error(error.response?.data?.message || '操作失败')
  } finally {
    submitLoading.value = false
  }
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除这个管理员吗？', '提示', {
      type: 'warning'
    })
    
    await deleteAdmin(row.id)
    ElMessage.success('删除成功')
    loadData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 删除用户
const handleDeleteUser = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除这个用户吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await deleteUser(row.id)
    
    if (response.code === 200) {
      ElMessage.success('删除成功')
      fetchUserList()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败，请检查网络连接')
    }
  }
}

const handleBatchDelete = async () => {
  if (selectedAdmins.value.length === 0) {
    ElMessage.warning('请选择要删除的管理员')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedAdmins.value.length} 个管理员吗？`,
      '提示',
      { type: 'warning' }
    )
    
    const ids = selectedAdmins.value.map(item => item.id)
    await batchDeleteAdmin(ids)
    ElMessage.success('批量删除成功')
    selectedAdmins.value = []
    loadData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 批量删除用户
const handleBatchDeleteUser = async () => {
  try {
    await ElMessageBox.confirm(`确定要删除选中的 ${selectedUsers.value.length} 个用户吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const userIds = selectedUsers.value.map(user => user.id)
    const response = await batchDeleteUser(userIds)
    
    if (response.code === 200) {
      ElMessage.success('批量删除成功')
      selectedUsers.value = []
      fetchUserList()
    } else {
      ElMessage.error(response.message || '批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败，请检查网络连接')
    }
  }
}

const handleLogout = () => {
  localStorage.removeItem('adminToken')
  localStorage.removeItem('level')
  localStorage.removeItem('adminInfo')
  router.push('/login')
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 用户状态切换
const handleToggleUserStatus = () => {
  ElMessage.info('状态切换功能开发中...')
}

// 获取已删除用户列表
const fetchDeletedUsers = async () => {
  try {
    deletedUsersLoading.value = true
    const pageDTO = { 
      current: deletedUsersPagination.current, 
      size: deletedUsersPagination.size 
    }
    
    const response = await getDeletedUsersPage(pageDTO)
    
    if (response.code === 200) {
      deletedUsersList.value = response.data.records
      deletedUsersPagination.total = response.data.total
    } else {
      ElMessage.error(response.message || '获取已删除用户列表失败')
    }
  } catch (error) {
    console.error('获取已删除用户列表失败:', error)
    ElMessage.error('获取已删除用户列表失败，请检查网络连接')
  } finally {
    deletedUsersLoading.value = false
  }
}

// 显示已删除用户对话框
const showDeletedUsers = () => {
  deletedUsersDialogVisible.value = true
  fetchDeletedUsers()
}

// 恢复用户
const handleRestoreUser = async (userId) => {
  try {
    await ElMessageBox.confirm('确定要恢复这个用户吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await restoreUser(userId)
    
    if (response.code === 200) {
      ElMessage.success('恢复成功')
      fetchDeletedUsers()
    } else {
      ElMessage.error(response.message || '恢复失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('恢复失败:', error)
      ElMessage.error('恢复失败，请检查网络连接')
    }
  }
}

// 批量恢复用户
const handleBatchRestoreUsers = async () => {
  if (!selectedDeletedUsers.value.length) {
    ElMessage.warning('请选择要恢复的用户')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要恢复选中的 ${selectedDeletedUsers.value.length} 个用户吗？`, 
      '提示', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const userIds = selectedDeletedUsers.value.map(user => user.id)
    const response = await batchRestoreUsers(userIds)
    
    if (response.code === 200) {
      ElMessage.success('批量恢复成功')
      selectedDeletedUsers.value = []
      fetchDeletedUsers()
    } else {
      ElMessage.error(response.message || '批量恢复失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量恢复失败:', error)
      ElMessage.error('批量恢复失败，请检查网络连接')
    }
  }
}

// 已删除用户选择变化
const handleDeletedUsersSelectionChange = (selection) => {
  selectedDeletedUsers.value = selection
}

// 用户分页处理
const handleUserSizeChange = (size) => {
  userPagination.size = size
  userPagination.current = 1
  fetchUserList()
}

const handleUserCurrentChange = (current) => {
  userPagination.current = current
  fetchUserList()
}

// 已删除用户分页处理
const handleDeletedUsersSizeChange = (size) => {
  deletedUsersPagination.size = size
  deletedUsersPagination.current = 1
  fetchDeletedUsers()
}

const handleDeletedUsersCurrentChange = (current) => {
  deletedUsersPagination.current = current
  fetchDeletedUsers()
}

// ==================== 医生管理方法 ====================

// 获取医院列表
const fetchHospitalList = async () => {
  try {
    const response = await getHospitalList()
    if (response.code === 200) {
      hospitalList.value = response.data.hospitals || []
    }
  } catch (error) {
    console.error('获取医院列表失败:', error)
    ElMessage.error('获取医院列表失败')
  }
}

// 获取医生列表
const fetchDoctorList = async () => {
  try {
    doctorLoading.value = true
    const queryData = {
      realName: doctorSearchForm.realName,
      practiceScope: doctorSearchForm.practiceScope,
      hospitalName: doctorSearchForm.hospitalName,
      current: doctorPagination.current,
      size: doctorPagination.size
    }
    
    const response = await getDoctorsByAdmin(queryData)
    
    if (response.code === 200) {
      doctorList.value = response.data.records
      doctorPagination.total = response.data.total
    } else {
      ElMessage.error(response.message || '获取医生列表失败')
    }
  } catch (error) {
    console.error('获取医生列表失败:', error)
    ElMessage.error('获取医生列表失败，请检查网络连接')
  } finally {
    doctorLoading.value = false
  }
}

// 医生搜索
const handleDoctorSearch = () => {
  doctorPagination.current = 1
  fetchDoctorList()
}

// 重置医生搜索
const resetDoctorSearch = () => {
  Object.assign(doctorSearchForm, {
    realName: '',
    practiceScope: '',
    hospitalName: ''
  })
  doctorPagination.current = 1
  fetchDoctorList()
}

// 医生选择变化
const handleDoctorSelectionChange = (selection) => {
  selectedDoctors.value = selection
}

// 显示新增医生对话框
const showCreateDoctorDialog = () => {
  isEditDoctor.value = false
  doctorDialogVisible.value = true
}

// 显示编辑医生对话框
const showEditDoctorDialog = (row) => {
  isEditDoctor.value = true
  Object.assign(doctorForm, row)
  doctorDialogVisible.value = true
}

// 重置医生表单
const resetDoctorForm = () => {
  Object.keys(doctorForm).forEach(key => {
    doctorForm[key] = key === 'gender' ? 1 : ''
  })
  doctorForm.id = null
  if (doctorFormRef.value) {
    doctorFormRef.value.resetFields()
  }
}

// 提交医生表单
const handleDoctorSubmit = async () => {
  if (!doctorFormRef.value) return
  
  try {
    await doctorFormRef.value.validate()
    doctorSubmitLoading.value = true
    
    if (isEditDoctor.value) {
      await updateDoctor(doctorForm)
      ElMessage.success('更新成功')
    } else {
      await createDoctor(doctorForm)
      ElMessage.success('创建成功')
    }
    
    doctorDialogVisible.value = false
    fetchDoctorList()
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error(error.response?.data?.message || '操作失败')
  } finally {
    doctorSubmitLoading.value = false
  }
}

// 删除医生
const handleDeleteDoctor = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除这个医生吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await deleteDoctorByAdmin(row.id)
    
    if (response.code === 200) {
      ElMessage.success('删除成功')
      fetchDoctorList()
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败，请检查网络连接')
    }
  }
}

// 批量删除医生
const handleBatchDeleteDoctor = async () => {
  if (selectedDoctors.value.length === 0) {
    ElMessage.warning('请选择要删除的医生')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedDoctors.value.length} 个医生吗？`,
      '提示',
      { type: 'warning' }
    )
    
    const ids = selectedDoctors.value.map(item => item.id)
    await batchDeleteDoctor(ids)
    ElMessage.success('批量删除成功')
    selectedDoctors.value = []
    fetchDoctorList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 医生分页处理
const handleDoctorSizeChange = (size) => {
  doctorPagination.size = size
  doctorPagination.current = 1
  fetchDoctorList()
}

const handleDoctorCurrentChange = (current) => {
  doctorPagination.current = current
  fetchDoctorList()
}

// ==================== 反馈管理方法 ====================

// 跳转到反馈管理页面
const goToFeedbackManagement = () => {
  router.push('/feedback-management')
}

// 刷新反馈数据
const refreshFeedbackData = async () => {
  try {
    // 获取当前管理员信息
    const adminInfo = JSON.parse(localStorage.getItem('adminInfo') || '{}')
    if (!adminInfo.id) {
      ElMessage.error('未找到管理员信息，请重新登录')
      return
    }

    // 获取待处理反馈
    const pendingResponse = await getPendingFeedbacksByAdmin(adminInfo.id)
    const pendingFeedbacks = pendingResponse.code === 200 ? pendingResponse.data : []

    // 获取已处理反馈
    const processedResponse = await getProcessedFeedbacksByAdmin(adminInfo.id)
    const processedFeedbacks = processedResponse.code === 200 ? processedResponse.data : []

    // 计算统计数据
    const total = pendingFeedbacks.length + processedFeedbacks.length
    const pending = pendingFeedbacks.filter(f => f.status === 'PENDING').length
    const processing = pendingFeedbacks.filter(f => f.status === 'PROCESSING').length
    const resolved = processedFeedbacks.filter(f => f.status === 'RESOLVED').length
    
    feedbackStats.value = {
      total,
      pending,
      processing,
      resolved
    }
  } catch (error) {
    console.error('获取反馈数据失败:', error)
    ElMessage.error('获取反馈数据失败')
  }
}

// ==================== 活动审核相关方法 ====================

// 加载活动列表
const loadActivityList = async () => {
  activityLoading.value = true
  try {
    const response = await fetch('/api/activity/admin/all', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('adminToken')}`,
        'Content-Type': 'application/json'
      }
    })
    
    if (response.ok) {
      const result = await response.json()
      if (result.code === 200) {
        activityList.value = result.data || []
        activityPagination.total = result.data?.length || 0
      } else {
        ElMessage.error(result.message || '获取活动列表失败')
      }
    } else {
      ElMessage.error('获取活动列表失败')
    }
  } catch (error) {
    console.error('获取活动列表失败:', error)
    ElMessage.error('获取活动列表失败')
  } finally {
    activityLoading.value = false
  }
}

// 刷新活动列表
const refreshActivityList = () => {
  loadActivityList()
}

// 活动搜索
const handleActivitySearch = () => {
  // 这里可以实现搜索逻辑
  loadActivityList()
}

// 重置活动搜索
const resetActivitySearch = () => {
  activitySearchForm.name = ''
  activitySearchForm.location = ''
  activitySearchForm.status = ''
  loadActivityList()
}

// 活动选择变化
const handleActivitySelectionChange = (selections) => {
  selectedActivities.value = selections
}

// 活动分页变化
const handleActivitySizeChange = (size) => {
  activityPagination.size = size
  loadActivityList()
}

const handleActivityCurrentChange = (current) => {
  activityPagination.current = current
  loadActivityList()
}

// 显示审核对话框
const showAuditDialog = (activity) => {
  selectedAuditActivity.value = activity
  auditForm.approved = true
  auditForm.comment = ''
  activityAuditDialogVisible.value = true
}

// 确认审核
const confirmAudit = async () => {
  if (!selectedAuditActivity.value) return
  
  auditSubmitLoading.value = true
  try {
    const response = await fetch(`/api/activity/${selectedAuditActivity.value.id}/audit`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('adminToken')}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams({
        approved: auditForm.approved,
        auditComment: auditForm.comment || ''
      })
    })
    
    if (response.ok) {
      const result = await response.json()
      if (result.code === 200) {
        ElMessage.success(auditForm.approved ? '审核通过' : '审核拒绝')
        activityAuditDialogVisible.value = false
        loadActivityList()
      } else {
        ElMessage.error(result.message || '审核失败')
      }
    } else {
      ElMessage.error('审核失败')
    }
  } catch (error) {
    console.error('审核失败:', error)
    ElMessage.error('审核失败')
  } finally {
    auditSubmitLoading.value = false
  }
}

// 查看活动详情
const viewActivityDetail = (activity) => {
  ElMessage.info('查看活动详情功能待实现')
}

// 获取活动状态类型
const getActivityStatusType = (status) => {
  switch (status) {
    case 'PENDING_AUDIT':
      return 'warning'
    case 'APPROVED':
      return 'success'
    case 'REJECTED':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取活动状态文本
const getActivityStatusText = (status) => {
  switch (status) {
    case 'PENDING_AUDIT':
      return '待审核'
    case 'APPROVED':
      return '已通过'
    case 'REJECTED':
      return '已拒绝'
    default:
      return '未知'
  }
}

// 生命周期
onMounted(() => {
  loadData()
  fetchUserList()
  fetchHospitalList()
  fetchDoctorList()
  refreshFeedbackData()
  loadActivityList()
})
</script>

<style scoped>
.super-admin-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left h2 {
  margin: 0;
  font-size: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.welcome {
  font-size: 14px;
}

.main-content {
  flex: 1;
  padding: 20px;
  background: #f5f5f5;
}

.admin-tabs {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.tab-content {
  margin-top: 20px;
}

.toolbar {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.search-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.action-area {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

/* 反馈管理样式 */
.feedback-management-content {
  padding: 20px;
}

.feedback-header {
  margin-bottom: 20px;
}

.feedback-header h3 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 20px;
}

.feedback-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.feedback-actions {
  margin-bottom: 30px;
  display: flex;
  gap: 10px;
}

.feedback-stats {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-content {
  padding: 20px;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-number.pending {
  color: #e6a23c;
}

.stat-number.processing {
  color: #f56c6c;
}

.stat-number.resolved {
  color: #67c23a;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

/* 活动审核对话框样式 */
.audit-dialog-content {
  padding: 20px 0;
}

.activity-info {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.activity-info h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.activity-info p {
  margin: 8px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.activity-info strong {
  color: #303133;
  font-weight: 600;
}
</style> 